<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
    <title>显示商品</title>
</head>
<body>
    <div class="container">
        <!--row-cols-4手机端一行显示一个，row-cols-md-4电脑端一行显示4个-->
        <div class="row row-cols-1 row-cols-md-4">
            <div class="col mb-4" th:each="goods : ${goodsList}">
                <div class="card h-100">
                    <img th:src="${goods.imgsrc}" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${goods.name}"></h5>
                        <p class="card-text" th:text="${goods.info}"></p>
                        <p th:text="'￥'+${goods.price}" style="color: #ff6699"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>